<template>
  <div class="catch-layout">
    <div class="http404-container">
      <div class="http404">
        <div class="pic-404">
          <img class="cover" :src="icon404" alt="404" />
        </div>
        <div class="bullshit">
          <div class="bullshit__oops">哎呀！</div>
          <div class="bullshit__info">
            保留所有权利
            <div class="returnIndex" @click="returnIndex">190.VIP</div>
            <!-- <nuxt-link style="color: #fd6040" to="/" target="_blank">190.vip</nuxt-link> -->
          </div>
          <div class="bullshit__headline">网站管理员说您无法进入此页面...</div>
          <!-- <div class="bullshit__info">
          请检查您输入的URL是否正确，或单击下面的按钮返回首页。
        </div> -->
          <div class="returnIndex" @click="returnIndex">返回</div>
          <!-- <nuxt-link to="/" class="bullshit__return-home">返回</nuxt-link> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBottom } from "@/api/data";
import { changelocation } from "@/utils/location.js";
export default {
  name: "Page404",
  layout: "catch",
  props: {
    error: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      icon404: require("_a/images/404.png"),
      icon500: require("_a/images/error.png"),
      color: "",
      colorType: 0,
    };
  },
  computed: {
    // message() {
    //   if (this.error.statusCode === 404) {
    //     return "网站管理员说您无法进入此页面...";
    //   }
    //   return this.error.message;
    // },
  },
  mounted() {
    if (this.$storage.getColor()) {
      this.color = this.$storage.getColor();
      this.colorType = this.$storage.getColorType();
    } else {
      this.getBottom();
    }
    // this.changeS();
  },
  methods: {
    // 更换颜色
    changeS() {
      document.documentElement.style.setProperty("--mainColor", this.color);
    },
    returnIndex() {
      window.location.href = changelocation("/");
    },
    async getBottom() {
      const { code, data } = await getBottom();
      if (code === 200) {
        this.color = data.color;
        this.colorType = data.colorType;
        this.changeS();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.catch-layout {
  display: flex;
  width: 100%;
  min-height: 100vh;
}
.returnIndex {
  color: $mainColor;
}
.http404-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .http404 {
    display: flex;
    align-items: center;
    justify-content: center;
    .pic-404 {
      width: 502px;
      height: 278px;
    }
    .pic-500 {
      width: 200px;
      height: 200px;
    }
  }
}
.cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style>
